<template>
  <view class="calendar-content">
    <view>
      <uni-calendar class="uni-calendar--hook" :insert="true" :lunar="true" :selected="clockInList" :showMonth="false"
        @change="change" ref="calendar" />
    </view>
    <view class="calendar-button">
      <button class="button-clockIn" @click="clockInButtonClick" size="mini">打卡</button>
      <button class="button-revoke" @click="revokeButtonClick" size="mini">撤销</button>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        // 打卡按钮按下标志
        isClockInEvent: false,
        // 撤销按钮按下标志
        isRevokeEvent: false,
      };
    },
    computed: {
      ...mapState('m_user', ['clockInList'])
    },
    methods: {
      ...mapMutations('m_user', ['updateUserClockInList']),
      // 获取当前日期事件
      getNowDate() {
        // 获取当前日期
        const date = new Date();
        const year = date.getFullYear(); // 获取当前年份
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const currentDate = `${year}-${month}-${day}`
        return currentDate; // 返回当前日期
      },
      // 日历选择日期事件
      change(e) {
        const selectDate = e.fulldate
        if (this.isClockInEvent) {
          // 更新打卡
          this.addClockInList(selectDate)
          this.isClockInEvent = false
        } else if (this.isRevokeEvent) {
          // 撤销打卡
          this.revokeClockInList(selectDate)
          this.isRevokeEvent = false
        } else {
          console.log('日历选择的日期===', selectDate)
        }
      },
      // 点击打卡按钮触发事件
      clockInButtonClick() {
        this.isClockInEvent = true
        // 获取日历组件实例
        const calendar = this.$refs.calendar;
        // 获取选中的日期
        calendar.change();
      },
      // 点击撤销按钮触发事件
      revokeButtonClick() {
        this.isRevokeEvent = true
        // 获取日历组件实例
        const calendar = this.$refs.calendar;
        // 获取选中的日期
        calendar.change();
      },
      // 添加打卡日期到打卡日历
      async addClockInList(date) {
        // 调用获取当前日期方法
        const currentDate = this.getNowDate()
        // 比较打卡日期和当前日期的大小
        const result = this.isDateGreaterThanCurrent(currentDate, date)
        if (result) return uni.$showMsg('打卡时间还没到哦~')

        // 准备参数
        var token = uni.getStorageSync('token')
        const clockInDate = {
          date,
          info: '已打卡',
        }
        const query = {
          token,
          clockInDate,
        }
        const {
          data: res
        } = await uni.$http.post('/api/update/clockIn', query)
        if (res.meta.status !== 200) return uni.$showMsg('已在此日期打过卡')
        this.updateUserClockInList(res.message)
        return uni.$showMsg('打卡成功')
      },
      // 撤销打卡日期
      async revokeClockInList(date) {
        // 准备参数
        var token = uni.getStorageSync('token')
        const query = {
          token,
          clockInDate: date,
        }
        const {
          data: res
        } = await uni.$http.post('/api/revoke/clockIn', query)
        if (res.meta.status !== 200) return uni.$showMsg('未在此日期打过卡')
        this.updateUserClockInList(res.message)
        return uni.$showMsg('撤销成功')
      },
      // 对比两个日期大小事件
      isDateGreaterThanCurrent(currentDate, date) {
        const currentDateObj = new Date(currentDate);
        const dateObj = new Date(date);
        return dateObj > currentDateObj;
      }
    }
  }
</script>

<style lang="scss">
  .calendar-button {
    display: flex;
    justify-content: center;
    align-items: center;
    // border: 1px solid red;
    margin-top: 70rpx;
    padding: 0 120rpx;

    button {
      width: 150rpx;
      font-size: 30rpx;
      color: white;
      font-weight: bolder;
      box-shadow: 0px 0.5px 4px 0.1px #f7f9ff;
    }

    .button-clockIn {
      background-color: #fba007;
    }

    .button-revoke {
      background-color: #ddd;
    }
  }
</style>